import { Descriptions } from "@douyinfe/semi-ui";
import { Image as AntdImage } from "antd";
import { useModel } from "umi";

const DetailPage = (props) => {
    const { defaultImageBase64 } = useModel("global");
    const { kuboUrl } = useModel("kubo");

    return (
        <div>
            <Descriptions size="small" align="justify" style={{ padding: "5px 0" }}>
                {props.detail.map((item) => {
                    if (item.type === "字符串") return <Descriptions.Item itemKey={item.name}>{item.value} </Descriptions.Item>;
                    if (item.type === "图片")
                        return (
                            <Descriptions.Item itemKey={item.name}>
                                {item.value.map((_item, index) => {
                                    return <AntdImage key={index} preview width={120} height={120} src={kuboUrl + _item} fallback={defaultImageBase64} />;
                                })}{" "}
                            </Descriptions.Item>
                        );
                })}
            </Descriptions>
        </div>
    );
};

export default DetailPage;
